@import "../../theme";

.automation-page {
    display: flex;
    flex-direction: column;

    &__button--active {
        background: @color-control-active;

        &:hover {
            background: @color-control-active;
        }
    }

    &__line {
        display: flex;
        flex-direction: row;

        .checkbox {
            border-right: none;
            flex: none;

            &__checkmark {
                background-image: @icon-cross;
                background-position: 0.3125rem 0.25rem;
                background-repeat: no-repeat;
                background-size: 1rem;

                &::before,
                &::after {
                    display: none;
                }
            }

            &__input:checked ~ .checkbox__checkmark {
                background-image: @icon-check;
                background-position: 0.375rem 0.25rem;
            }
        }

        .time-range-picker .time-range-picker__input--start {
            border-left: @size-border-inner solid @color-border;
        }
    }

    &__label {
        font-size: @size-text-small;
        line-height: @size-text-small-height;
        text-align: center;
    }

    &__description {
        font-size: @size-text-small;
        line-height: @size-text-small-height;
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }

    &__location-description {
        font-size: @size-text-small;
        line-height: @size-text-small-height;
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }

    &::after {
        background-image: linear-gradient(to bottom, fadeout(@color-back, 10%), fadeout(@color-back, 100%));
        content: "";
        display: block;
        height: @size-control-inner;
        left: 0;
        margin-top: @size-border;
        pointer-events: none;
        position: absolute;
        top: 100%;
        transition: height @time-slow;
        width: 100%;
    }

    &__location {
        margin-top: @indent-small;

        &__latitude,
        &__longitude {
            flex: auto;
            text-align: center;
            text-indent: 0;
            width: 100%;
        }

        &__latitude {
            border-left: @size-border-inner solid @color-border;
            border-right: none;
        }

        &__longitude {
            border-left: @size-border-inner solid @color-border;
        }
    }

    &__system-dark-mode {
        display: flex;
        flex-direction: row;
        margin-top: @indent-small;

        &__checkbox {
            flex: none;
        }

        &__button {
            border-left-width: @size-border-inner;
            color: @color-input-fore;
            flex: auto;

            &--active {
                color: @color-control-fore;
            }
        }

        &:hover &__button,
        &:hover &__checkbox {
            background-color: @color-control-hover;
        }
    }
    
    .toggle {
        width: 100%;
    }

    .dropdown {
        background-color: transparent;
        box-shadow: inset 0 0 0 @size-border @color-border;
        height: @size-control-inner + 2 * @size-border;
        margin-top: @indent-small;
    }

    .dropdown__selected {
        background-color: transparent;
        background-position: center right 0.25rem + @size-border;
        height: @size-control-inner;
        margin-top: @size-border;
    }

    .dropdown--open .dropdown__list {
        border: @size-border solid @color-border;
        margin-top: 0;
        padding-top: @size-border;
    }

    .dropdown__list__item {
        height: @size-control-inner;
    }
}
